<!DOCTYPE html>
<html>
<head>
    <title>预约支付</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
              ">

    <link rel="stylesheet" href="${basePath}/css/weui.min.css">
    <link rel="stylesheet" href="${basePath}/css/jquery-weui.css">
    <link rel="stylesheet" href="${basePath}/css/demos.css">
    <style type="text/css">
        .cy-bd-h{
            font-size: 18px;
            font-weight: normal;
            text-align: center;
            border-width: 1px 0;
            background: #fff;
            color: #787878;
            padding: .5em 0;
        }
        body{
            background: #f2f5f7;
        }
        .icon-box {
            margin-bottom: 0px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center
        }
        .icon-box i {
            margin-right: 18px
        }
        .icon-box__ctn {
            -webkit-flex-shrink: 100;
            flex-shrink: 100
        }
        .icon-box__title {
            font-weight: 400;
            font-size: 16px;
        }
        .icon-box__desc {
            margin-top: 6px;
            font-size: 12px;
            color: #888
        }
        .icon_sp_area {
            margin-top: 10px;
            text-align: left
        }

        .icon_sp_area i:before {
            margin-bottom: 5px
        }
        .weui-cells:before {
            border-top: 0px;
        }
    </style>
</head>

<body ontouchstart class="detail">

<header>
    <h3 class="cy-bd-h">订单支付</h3>
</header>
<div class="page__bd">
    <p class="weui-cells__title" style="padding-top: .5em;background: white;margin-bottom: 0;font-size: 16px;color: #323232;">${order.doctor.name}-${order.product.type}</p>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p style="padding-left: 0;border-top: 0;color: #323232;font-size: 14px;">${order.doctor.hospital} ${order.doctor.titleName}</p>
            </div>
            <div class="weui-cell__ft" style="font-size: 14px;border-top: 0;color: #323232;">¥${order.price}</div>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p >共需支付</p>
            </div>
            <div class="weui-cell__ft" style="border-top: 0;color: #323232;">¥ ${order.price}</div>
        </div>
    </div>
    <p class="weui-cells__title" style="margin-bottom:.77em;;font-size: 15px;color: #323232;height: 20px;line-height: 20px;">选择支付方式</p>

    <div class="weui-cells weui-cells_radio" >
        <label class="weui-cell weui-check__label" for="x11">
            <div class="weui-cell__bd">
                <div class='demos-content-padded' style="padding: 0">
                    <div class="icon-box">
                        <i class="weui-icon-success weui-icon_msg" style="font-size: 30px;padding: 0"></i>
                        <div class="icon-box__ctn">
                            <h3 class="icon-box__title">微信支付</h3>
                            <p class="icon-box__desc">推荐安装微信5.0及以上版本的用户使用</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="radio1" id="x11">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
    <article class="weui-article">
        <section>
            <a href="javascript:;" class="weui-btn weui-btn_primary payOrder" style="background:#ff6134;">去支付</a>
        </section>
    </article>

</div>
<script src="${basePath}/js/jquery-2.1.4.js"></script>
<script src="${basePath}/js/fastclick.js"></script>
<script src="${basePath}/js/jquery-weui.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${signature.appId}', // 必填，公众号的唯一标识
        timestamp: ${timestamp}, // 必填，生成签名的时间戳
        nonceStr: '${signature.nonceStr}', // 必填，生成签名的随机串
        signature: '${signature.signature}',// 必填，签名，见附录1
        jsApiList: [ 'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage', 'onMenuShareQQ','chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
</script>
<script>
    $(document).on("click", ".payOrder", function () {
        var orderId = '${order.id?c}';
        $.ajax({
            type: "get",
            async: false,
            url: '${basePath}/pay/wxpay',
            data: {
                orderId: orderId
            },
            success: function (data) {
                console.log(JSON.stringify(data));
                $("#loginfo").html(JSON.stringify(data));
                // var jsonObj = JSON.parse(data);
                var result = data.t;
                if (result == null) {
                    return;
                }
                WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":result.appId,   //公众号名称，由商户传入
                            "timeStamp": result.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr" : result.nonceStr, //随机串
                            "package" : result.package,
                            "signType" : result.signType,         //微信签名方式：
                            "paySign" : result.paySign //微信签名
                        },
                        function(res){
                            console.log(JSON.stringify(res));
                            location.href = "${basePath}/detailOrder.htm?orderId="+orderId;
                            if(res.err_msg == "get_brand_wcpay_request：ok" ) {
                                <#--location.href = "${basePath}/detailOrder.htm?orderId="+orderId;-->
                            }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                        }
                );
//                        wx.chooseWXPay({
//                            appId: result.appId,
//                            timeStamp: result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
//                            nonceStr: result.nonceStr, // 支付签名随机串，不长于 32 位
//                            package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
//                            signType: result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
//                            paySign: result.paySign, // 支付签名
//                            success: function (res) {
//                                // 支付成功后的回调函数
//                                $("#loginfo").html(res);
//                                alert(res);
//                            }
//                        });
            }
        });
    });

</script>
</body>

</html>
